import "./index.scss"
import {View} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {serverInfoStore} from "./model"
import {DeviceStatusIcon} from "@/components/images"

const Serverinfo = () => {
	let router = useRouter()
	const {updatePageQuery, updatePageDataSource, pageData} = useContext(serverInfoStore)

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Serverinfo useEffect")
	})
	// 对应 onShow
	useDidShow(() => {
		console.log("Serverinfo useDidShow")
		updatePageQuery(router.params)
		updatePageDataSource()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Serverinfo useDidHide")
	})
	return (
		<View className="container px-24">
			<View className="mt-16" style="height:40px;line-height:40px;">
				{pageData?.devServerMsgPackList.map(item => {
					if (item.serverPropertyName.indexOf("创建时间") == -1) {
						if (["在线", "离线"].includes(item.serverPropertyValue)) {
							return (
								<View className="x flex justify-between items-center">
									<View className="hanzi text-15 font-medium">
										{item.serverPropertyName}：
									</View>
									<View className="flex-1 flex justify-end items-center">
										<DeviceStatusIcon
											status={item.serverPropertyValue}
										></DeviceStatusIcon>
										<View className="ml-6 text-15 font-bold" text-x_text>
											{item.serverPropertyValue}
										</View>
									</View>
								</View>
							)
						} else {
							return (
								<View className=" flex justify-between items-center">
									<View className="hanzi text-15 font-medium">
										{item.serverPropertyName}：
									</View>
									<View className="flex-1 flex justify-end items-center text-15 text-x_text">
										{item.serverPropertyValue}
									</View>
								</View>
							)
						}
					}
				})}
				<View className=" flex justify-between items-center">
					<View className="hanzi text-15 font-medium">激活时间：</View>
					<View className="flex-1 flex justify-end items-center text-15 text-x_text">
						{pageData?.activationStartTime}
					</View>
				</View>
				<View className=" flex justify-between items-center">
					<View className="hanzi text-15 font-medium">到期时间：</View>
					<View className="flex-1 flex justify-end items-center text-15 text-x_text">
						{pageData?.activationEndTime}
					</View>
				</View>
			</View>
		</View>
	)
}
export default observer(Serverinfo)
